<template>
    <el-card class="stream-control-card">
        <template #header>
            <span>{{ website.aside.streamControlTitle }}</span>
        </template>
        <el-button :type="website.aside.recordType" @click="onRecord(website.aside.recordText)">
            {{ website.aside.recordText }}
        </el-button>
        <el-button :type="website.aside.snapshotType" @click="onSnapshot(website.aside.snapshotText)">
            {{ website.aside.snapshotText }}
        </el-button>
        <div>
            <el-check-tag v-for="c in userCameras" :key="c._id" :checked="component.streamState.get(c.name)?.status"
                @click="onStart(c)">
                {{ c.name }}
            </el-check-tag>
            <!-- <el-check-tag :checked="false" @click="onStart">Checked</el-check-tag> -->
        </div>

        <el-dialog v-model="component.dialog.visible" :title="component.dialog.title" @closed="onCancel">

            <el-form>
                <el-form-item :label="component.common.name.label" :label-width="component.common.name.labelWidth">
                    <el-input v-model="component.form.name" :placeholder="component.common.name.placeholder"></el-input>
                </el-form-item>
                <el-form-item :label="component.common.path.label" :label-width="component.common.path.labelWidth">
                    <el-input v-model="component.form.path" :placeholder="component.common.path.placeholder"></el-input>
                </el-form-item>
                <el-form-item :label="component.common.type.label" :label-width="component.common.type.labelWidth">
                    <el-select v-model="component.form.type" class="m-2" :placeholder="component.common.type.placeholder">
                        <el-option v-for="item in typeOpts" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <div v-if="component.dialog.title === '录制'">
                    <el-form-item :label="component.recordDialog.slider.label"
                        :label-width="component.recordDialog.slider.labelWidth">
                        <el-slider v-model="component.recordDialog.slider.duration" :max="component.recordDialog.slider.max"
                            :min="component.recordDialog.slider.min"
                            :format-tooltip="component.recordDialog.slider.formatter" show-input />
                    </el-form-item>
                </div>
                <div v-if="component.dialog.title === '截图'">

                </div>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button :type="component.dialog.cancel.type" @click="onCancel">
                        {{ component.dialog.cancel.text }}
                    </el-button>
                    <el-button :type="component.dialog.confirm.type" @click="onConfirm">
                        {{ component.dialog.confirm.text }}
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>


<script lang="ts" setup>
import { computed, inject, onBeforeMount, reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { IStreamControlState } from '@/store/models/Home/Aside/StreamControl/types';
import { ICamera } from '@/store/models/Admin/CameraManagement/types';
import { IWebsite } from '@/store/types';
const store = useStore();
const component = computed(() => store.state.home.frontAside.streamControl as IStreamControlState)
const userCameras = computed(() => store.state.user.user.camera as ICamera[]);
const streamState = computed(() => store.state.home.frontAside.streamControl.streamState as IStreamControlState['streamState'])
const website = inject('website') as IWebsite;

const onRecord = (eventName: string) => store.commit('home/frontAside/streamControl/_onEvent', eventName)
const onSnapshot = (eventName: string) => store.commit('home/frontAside/streamControl/_onEvent', eventName)

const onConfirm = () => {
    streamState.value.forEach((v, k) => {
        if (v.status) {
            store.dispatch('home/frontAside/streamControl/onConfirm', { name: k, camera: v.camera });
        }
    })
}

const onCancel = () => store.dispatch('home/frontAside/streamControl/onCancel');

const typeOpts = computed(() => {
    if (component.value.dialog.title === '录制') {
        return component.value.recordDialog.typeOpts
    } else if (component.value.dialog.title === '截图') {
        return component.value.snapshotDialog.typeOpts
    }
})
const onStart = (c: ICamera) => store.commit('home/frontAside/streamControl/_onStart', c);
</script>
